<template>
  <view class='loadContainer' :style="'background:' + (loadStatus_f !== 0 ? '#F8F8F8' : 'transparent')">
    <view class="loadTip" v-if='!pageEnd'>
      <image :src="getImageOssUrl('/common/loading.png')" v-if="loadStatus_f === 1" />
      <text @click="reQuest" v-if="loadStatus_f !== 2">{{ loadTxt }}</text>
      <slot v-else>
        {{ loadTxt }}
      </slot>
    </view>
    <view class="pagination">
      <uni-pagination
        v-if='pageEnd && dataCount !== pageList.length'
        show-icon="true" 
        :total="dataCount"
        :pageSize="params.pageSize"
        @change="changePage"
        :current="pageIndex" />
    </view>
  </view>
</template>
<script>
/**
 * 根据后台数据判断使用纯前端分页（分页请求只是请求从前端数组中获取下一部分）还是前端+后台分页（一定量的数据内从前端数组中获取下一部分，超过该数量后再请求后台数据，然后替换前端数组）
 * 这样保证如果有无穷多的数据那么会分页去渲染，不会出现越数据越多，界面越卡的清空。
 * 适用：1、后台分页但是总数据量很多，分页累加超过N条后会变卡2、数据后台没有分页但是数量特别多
 */
import {uniPagination} from '@dcloudio/uni-ui'
export default {
  components: {
    uniPagination
  },
  props: {
    update: {
      type: Boolean,
      default: false
    }, // 是否有更新进行请求
    refresh: {
      type: Boolean,
      default: false
    }, 
    list: {
      type: Array,
      default: () => []
    }, // 当前列表
    params: {
      type: Object,
      default: () => {}
    }, // 必须包含每页数量pageSize，还有其它的请求条件
    url: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      pageIndex: 1, // 后台分页当前页码
      pageEnd: false, // 后台时否返回的是最后一页数据
      dataCount: 0, // 数据总量（不是当前页而是后台结算的所有）
      pageList: [], // 当前页所有产品列表
      loadStatus_f: 1, // 前端分页加载状态
      pageIndex_f: 1, // 前端分页当前页码
      pageSize_f: 8 // 前端分页每页数量
    }
  },
  computed: {
    loadTxt () {
      var _loadTxt = ''
      switch (this.loadStatus_f) {
        case 0:
          _loadTxt = ''
          break
        case 1:
          _loadTxt = '正在加载中'
          break
        case 2:
          _loadTxt = '没有更多数据了'
          break
        case 3:
          _loadTxt = '上拉加载更多'
          break
        default: console.log('加载状态码异常！！')
      }
      return _loadTxt
    }
  },
  watch: {
    update(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.getMore()
      }
    },
    refresh(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.refreshHandler()
      }
    }
  },
  methods: {
    reQuest () { // 请求失败，重试
      // if (this.loadStatus_f === 3) {
      //   this.requestList()
      // }
    },
    refreshHandler () {
      Object.assign(this.$data, this.$options.data()) // 页面再次加载后分组组件state重置一下 注意：data应该使用函数返回值方式
      this.requestList()
    },
    getMore () { // 父组件updated控制的方法
      if (this.list.length < this.pageList.length){ // 上拉未到本页尾前端分页
        this.pagination()
      } else {
        if (this.dataCount === this.pageList.length) { // 純前端分頁只有一页数据
          if ( this.pageList.length > 0) {
            this.loadStatus_f = 2
          } else {
            this.loadStatus_f = 0
          }
        } else {
          if (this.pageIndex * this.params.pageSize >= this.dataCount) { // 2、数据库所有的数据都加载完毕此时应该通知界面没有更多数据了
            // this.pageEnd  = false
            this.loadStatus_f = 2
          } else { // 本頁加載完畢但是后台还有数据。此时去出现分页器
            this.loadStatus_f = 0
            this.pageEnd  = true
          }
        }
      }
    },
    changePage (e) {
      if (e.type === 'next') { // 下一页
        this.pageIndex++
        this.requestList()
      } else if (e.type === 'prev') {
        this.pageIndex--
        this.requestList()
      }
    },
    pagination () { // 对后台数据分页
      let pageIndex_f = this.pageIndex_f;
      let pageSize_f = this.pageSize_f;
      let pageList = this.pageList;
      let list = this.list.slice(0); // 之前的已渲染数据列表
      if (pageIndex_f == 1 && pageIndex_f * pageSize_f >= pageList.length) { // 只有一页数据
        this.loadStatus_f = 0
      } else {
        this.loadStatus_f = 1
      }
      
      if ((pageList.length - (pageIndex_f - 1) * pageSize_f) >= pageSize_f) { // 数据足够再加载一页
        for (let i = (pageIndex_f - 1) * pageSize_f; i < pageIndex_f * pageSize_f; i++) {
          list.push(pageList[i])
        }
        this.$emit('bind_list', list) // 通知父组件更新列表
        this.pageIndex_f = pageIndex_f + 1
        this.loadStatus_f = 3
      } else { // 剩余数据不足一页了
        if (list.length < pageList.length) { // 保证不超出
          for (let i = (pageIndex_f - 1) * pageSize_f; i < pageList.length; i++) { // 累加剩余的数据
            list.push(pageList[i])
          }
          this.$emit('bind_list', list) // 通知父组件更新列表
        } else {
          this.$emit('bind_list', pageList)
          this.loadStatus_f = 2
        }
      }
    },
    resetList () { // 重新请求后台数据收前端分页数据重置
      // this.$emit('bindList', [])
      // Object.assign(this.$data, this.$options.data()) // 页面再次加载后数据重置一下 注意：data应该使用函数返回值方式
    },
    mockData(size, total, pageIndex) { // size 每页数量量 total 符合条件的数据总量 pageIndex 当前页码
      let datas = [];
      for (let i = (pageIndex - 1) * size; i < pageIndex * size && i < total; i++) {
        datas.push({code: i, soName: '安徽爱亲直营店', productList: [{productName: '惠氏启赋1段900g/听', orderQty:'x2'},{productName: '惠氏启赋1段900g/听', orderQty:'x2'},{productName: '惠氏启赋1段900g/听', orderQty:'x2'},{productName: '惠氏启赋1段900g/听', orderQty:'x2'},{productName: '*****', orderQty:'x2'}]})
      }
      let res = {
        result: 'success',
        data: datas
      }
      return res
    },
    filterData(data, size) {
      let datas = data.filter((item, index) => {
        if (index < size) {
          return true
        } else {
          return false
        }
      })
      let res = {
        result: 'success',
        data: datas
      }
      return res
    },
    requestList () {
      // this.resetList()
      this.http.GET({
        name: this.url,
        rejectLoadingTip: true,
        // rejectErrorTip: true,
        params: Object.assign({pageIndex: this.pageIndex}, this.params)
      }).then(res => {
        uni.stopPullDownRefresh() // 下拉刷新操作在成功获取数据后停止动画
        let that = this;
        if (res.result === 'success') { // 返回成功状态
          if (res.data.datas) { // 后台有分页此时的分页模式是前加后
            if (this.params.pageSize <= this.pageSize_f) {
              this.$emit('bind_list', res.data.datas) // 两种模式都不累加 后台 数据清空之前数据
              console.log('后台分页每页数量不大于前端分页每页数量，不用前端分页!!!')
            } else {
              this.dataCount = res.data.totalCount
              this.pageList = res.data.datas;
              that.pagination() // 请求完去加载前端分页的第一页数据
            }
          } else { // 适配后台没有分页但是数据量特别大的情况即纯前端分页
            this.dataCount = res.data.length;
            this.pageList = res.data;
            
            // let data = res.data.filter((item, index) => index < 2)
            // console.log(data)
            // this.dataCount = data.length;
            // this.pageList = data;
            // 
            this.loadStatus_f = 0;
            if (this.pageList.length > 0) { // 如果有数据，为避免太长的前端渲染延时先去提示加载中
              that.pagination() // 请求完去加载前端分页的第一页数据
            } else {
              this.$emit('bind_list', [])
            }
          }
        } else {
          that.loadStatus_f = 0
        }
      })
    }
  }
}
</script>
<style>
  .loadContainer {
    width: 100%;
    background: transparent;
  }
 .loadTip {
    width: 100%;
    background: transparent;
    text-align: center;
    font-size: 25upx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999999;
  }
  .loadTip text {
    color: #999999;
    padding: 20upx 0upx;
  }
  .loadTip image{
    width: 30upx;
    height: 30upx;
    margin-right: 20upx;
    animation: rotating 1.2s linear infinite;
  }
  @keyframes rotating{
    from{transform:rotate(0)}
    to{transform:rotate(360deg)}
  }
  .pagination {
    width: 100%;
  }
  .uni-pagination__btn, .uni-pagination--hover {
    background: white !important;
    opacity: 1;
  }
</style>
